<template>
  <div>
    <template v-if="!viewShow">
      <UserTree
        v-if="type === 'tree'"
        :id="id"
        v-model="value"
        :placeholder="placeholder"
        :name="name"
        :value="value"
        :autocomplete="autocomplete"
        :automatic-dropdown="automaticDropdown"
        :size="size"
        :disabled="disabled"
        :clearable="clearable"
        :filterable="filterable"
        :allow-create="allowCreate"
        :loading="loading"
        :popper-class="popperClass"
        :remote="remote"
        :loading-text="loadingText"
        :no-match-text="noMatchText"
        :no-data-text="noDataText"
        :remote-method="remoteMethod"
        :multiple="multiple"
        :multiple-limit="multipleLimit"
        :default-first-option="defaultFirstOption"
        :reserve-keyword="reserveKeyword"
        :value-key="valueKey"
        :collapse-tags="collapseTags"
        :popper-append-to-body="popperAppendToBody"
        @input="$emit('input',$event)"
        @change="$emit('change',$event)"
      />
      <UserTable
        v-if="type === 'table'"
        v-model="value"
        :value="value"
        :disabled="disabled"
        :placeholder="placeholder"
        :clearable="clearable"
        :multiple="multiple"
        :multiple-limit="multipleLimit"
        @input="$emit('input',$event)"
        @change="$emit('change',$event)"
      />
    </template>
    <template v-else>
      {{ viewName }}
    </template>
  </div>
</template>

<script>
import UserTree from './user'
import UserTable from './UserTable/index'
import props from '@/components/TreeSelect/mixin'
import tableProps from './UserTable/mixin'
// import { getConfigKey } from '@/api/system/config'
export default {
  name: 'UserSelect',
  components: {
    UserTree,
    UserTable
  },
  props: {
    ...props,
    ...tableProps,
    viewShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      type: '',
      userId: undefined
    }
  },
  computed: {
    viewName() {
      var name = this.findFullName(this.value, this.$store.state.user.userTree)
      return name
    }
  },
  watch: {
    // value: {
    //   handler(val) {
    //     console.log(val, '人员')
    //   },
    //   deep: true,
    //   immediate: true
    // }
  },
  created() {
    // getConfigKey('user_components_type').then(res => {
    //   if (!res.msg) {
    //     this.type = 'tree'
    //   } else {
    //     this.type = res.msg
    //   }
    // })
      if (!this.$store.state.app.componentLayout) {
        this.type = 'tree'
      } else {
        this.type = this.$store.state.app.componentLayout
      }
  },
  methods: {
    findFullName(val, list) {
      this.userName = []
      var dataValue = null
      if (!(val instanceof Array)) {
        dataValue = [val]
      } else {
        dataValue = val
      }
      for (const value of dataValue) {
        this.childrenName(value, list)
      }
      return this.userName.join(',')
    },
    childrenName(val, array) {
      array.some(item => {
        if (item.id === val) {
          this.userName.push(item.label)
          return true
        } else if (item.children) {
          return this.childrenName(val, item.children)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
